<template>
  <div class="demand-add">
    <div class="demand-add-warp">
      <!-- <div class="demand-title">
        <div class="demand-title-text">标题</div>
        <input type="text" class="demand-title-input" v-model="title" :maxlength="40" placeholder="请输入标题" s>
      </div> -->
      <textarea class="content" v-model="desc" :maxlength="400" placeholder="描述你的需求，清晰的描述有助于别人理解" />
      <div class="preview-list" v-if="imgShowArr.length > 0">
        <div class="preview-list-content" v-for="(item,index) in imgShowArr" :key="index">
          <img :src="item" mode="scaleToFill">
          <div class="delete" @click="deleteImg(index)">删除</div>
        </div>
      </div>
      <div class="demand-add-btn">
        <img src="../../../../static/images/gongqiu_add_btn.png" @click="upLoadImg">
        <text>传个图片吧</text>
      </div>
      <div class="gongqiu-type">
        <div class="left">
          <div>供求类型：</div>
          <picker @change="bindPickerChange" :value="index" :range="typeValueArray">
            <view class="picker">
              {{typeValue}}
            </view>
          </picker>
        </div>
        <img src="../../../../static/images/me_icon.png">
      </div>
    </div>
    <div class="submit-btn" @click="setSupplyDemandBtn">发布供求</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      typeValueArray: ['供', '求'],
      typeValue: "供",
      typeNum: 0,
      imgArr:[],
      imgShowArr:[], //展示用
      imgIdArr:[], //上传用
      // title:'',
      desc:'',
      showLoadingFlag: true,
    }
  },
  onReady(){
    this.typeValue = "供";
    this.typeNum = 0;
    this.imgArr = [];
    this.imgShowArr = []; //展示用
    this.imgIdArr = []; //上传用
    // this.title = '';
    this.desc = '';
    this.showLoadingFlag = true;
  },
  methods: {
     bindPickerChange: function(e) {
      this.typeValue = this.typeValueArray[e.mp.detail.value]
      this.typeNum = e.mp.detail.value;
    },
    //点击上传图片按钮(预览)
    upLoadImg(){
      let This = this;
      if(This.imgArr.length == 9){
        wx.showToast({
          title: '最多添加9张图片',
          icon: 'none',
          duration: 1000
        })
        return;
      }
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          This.imgArr.push(tempFilePaths[0]);
          This.imgShowArr.push(tempFilePaths[0]);
        }
      })
    },
    //删除预览中的图片
    deleteImg(index){
      let arr1 = this.imgShowArr;
      let arr2 = this.imgArr;
      arr1.splice(index,1);
      arr2.splice(index,1);
      this.imgShowArr = arr1;
      this.imgArr = arr2;
    },
    //发布需求
    async setSupplyDemandBtn(){
      var This = this;
      if(this.showLoadingFlag){
        wx.showLoading({
          title: '发布中',
        })
      }
      if(This.imgArr.length == 0){
        This.setSupplyDemand();
        wx.hideLoading();
        This.showLoadingFlag = true;
        return
      }
      wx.uploadFile({
        url: 'https://www.rzkeji.com/api/file/upload-img',
        filePath: This.imgArr[0],
        name: 'photo',
        success (res){
          var data = JSON.parse(res.data);
          if(data.level == "success"){
            This.imgIdArr.push(data.data.id);
            This.imgArr.splice(0,1);
            This.showLoadingFlag = false;
            This.setSupplyDemandBtn();
          }
        }
      })
    },
    //发布需求
    async setSupplyDemand(){
      let user_token = wx.getStorageSync('userToken');
      if(this.desc.length == 0){
        wx.showToast({
          title: "内容不能为空",
          icon: 'none',
          duration: 1000
        })
        return
      }
      if(this.imgIdArr.length == 0){
        wx.showToast({
          title: "图片不能为空",
          icon: 'none',
          duration: 1000
        })
        return
      }
      let params = {
        // name: this.title,
        desc: this.desc,
        img_ids: this.imgIdArr,
        status: this.typeNum,
        user_token: user_token
      };
      let res = await this.$api.setSupplyDemand(params);
      if(res.data.level == "success"){
        wx.showToast({
          title: "发布成功,请等待审核",
          icon: 'none',
          duration: 1500
        })
        setTimeout(()=>{
          wx.switchTab({
            url: '/pages/demandMain/demand/main'
          })
        },1500)
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    }
  }, 
}
</script>

<style lang="scss" scoped>
  .demand-add{
    min-height: 100vh;
    background-color: #f1f1f1;
    padding-bottom: 180rpx;
    .demand-add-warp{
      background-color: #fff;
      padding: 0 20rpx 80rpx;
      .demand-title{
        height: 80rpx;
        padding: 20rpx 0;
        display: flex;
        align-items: center;
        font-size: 32rpx;
        border-bottom: 1px #eeeeee solid;
        .demand-title-text{
          margin-right: 14rpx;
        }
        .demand-title-input{
          width: 80%;
        }
      }
      .content{
        width: 100%;
        margin: 20rpx 0;
        font-size: 28rpx;
      }
      .preview-list{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .preview-list-content{
          width: 200rpx;
          margin-top: 16rpx;
          margin-right: 32rpx;
          img{
            width: 200rpx;
            height: 200rpx;
            border-radius: 6rpx;
          }
          .delete{
            width: 100%;
            height: 40rpx;
            line-height: 40rpx;
            color: #fff;
            background-color: #2aa7e1;
            text-align: center;
            font-size: 28rpx;
            border-radius: 4rpx;
          }
        }
      }
      .demand-add-btn{
        display: flex;
        align-items: center;
        margin: 20rpx 0;
        padding-bottom: 20rpx;
        border-bottom: 1px #eeeeee solid;
        img{
          width: 160rpx;
          height: 160rpx;
          margin-right: 10rpx;
        }
        text{
          color: #666;
        }
      }
      .gongqiu-type{
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px #eeeeee solid;
        font-size: 28rpx;
        .left{
          display: flex;
          justify-content: center;
          align-items: center;
          .picker{
            width: 300rpx;
            height: 80rpx;
            line-height: 80rpx;
          }
        }
        img{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .submit-btn{
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      background-color: #2aa7e1;
      position: fixed;
      left: 0;
      bottom: 0;
    }
  }
</style>
